<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/12/30
  Time: 15:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言列表</title>
    <style>
        body { font-family: Arial, sans-serif;  margin: 0; padding: 20px; }
        table { width: 30%; margin: 20px 0; border-collapse: collapse; }
        th, td { text-align: left; padding: 8px; }
        th { background-color: #333; color: white; }
        tr:hover { background-color: #ddd; }
    </style>
    <script>
        //监听这个页面然后动用方法
        document.addEventListener("DOMContentLoaded", function() {
            //使用fetch API 发送一个GET请求到服务器上的/MessageListServlet。这个Servlet应该负责处理请求并返回留言数据的JSON格式。
            fetch('/MessageListServlet')

                .then(response => response.json())//处理这个Promise，将响应转换为JSON格式的数据。
                .then(data => {                   //data参数包含了从服务器获取的留言数据数组
                    const tableBody = document.getElementById('recordTableBody');//获取页面中ID为 recordTableBody 的 <tbody> 元素，这是表格的主体部分，用于动态插入留言数据
                    data.forEach(record => {      //使用forEach方法遍历data数组中的每一条留言记录（record）
                        //为每条记录创建一个新的表格行
                        const row = document.createElement('tr');
                        row.innerHTML =
                            "<td>" + record.id + "</td><td>"
                            + record.author + "</td><td>"
                            + record.content + "</td><td>"
                            //使用toLocaleDateString()和toLocaleTimeString()方法将日期和时间转换为本地格式的字符串。
                            + new Date(record.create_time).toLocaleDateString() + " " + new Date(record.create_time).toLocaleTimeString() + "</td>"
                        ;

                        tableBody.appendChild(row); //将新创建的行元素添加到表格主体中
                    });
                })
                //如果在请求或处理过程中发生错误，.catch方法将捕获这些错误，并在控制台中输出错误信息。
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</head>

<body>
<h1>留言列表</h1>

<table border="1">
    <tr>
        <td>ID</td>
        <td>用户名</td>
        <td>留言内容</td>
        <td>留言时间</td>
    </tr>
   <tbody id="recordTableBody"> <%-- 为 <tbody> 元素分配了一个唯一的ID--%>
    </tbody>
</table>
<a href="/index.jsp">返回主页</a>
</body>

</html>
